<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Connector test</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../dist/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var cs  = {};
		function connect(f,t){
			//console.log('connect');
			var skewness = 50/100;
			var fbs =f.bounds;
			var tbs=t.bounds;

			var fcx =fbs.x+(fbs.width/2) ,fcy =fbs.y+(fbs.height/2);
			var tcx =tbs.x+(tbs.width/2) ,tcy =tbs.y+(tbs.height/2);

			//console.log('fcx',fcx,'fcy',fcy);
			//console.log('tcx',tcx,'tcy',tcy);

			var lr = (fcx < tcx) ? 'right' :'left';
			var tb = (fcy < tcy ) ? 'bottom' :'top';

			lr = (fcx === tcx ) ? 'inline' : lr;
			tb = (fcy === tcy) ? 'inline' : tb;

			
			//console.log('lr',lr);
			//console.log('tb',tb);

			var points =null;
			if(lr=='inline' && tb=='inline'){
				;//do nothing
			}else if(lr=='inline' || tb=='inline'){
				points =[[fcx,fcy],[tcx,tcy]];
			}else if(lr =='right' && (tb =='top' || tb=='bottom')){
				var bx = Math.abs(fcx-tcx)*skewness;
				var nx = bx+fcx;
				points = [[fcx,fcy],[nx,tcy],[nx,tcy],[tcx,tcy]];
			}else if(lr =='left' && (tb =='top' || tb=='bottom')){
				var bx = Math.abs(fcx-tcx)*skewness;
				var nx = Math.abs(bx-fcx);
				points = [[fcx,fcy],[nx,tcy],[nx,tcy],[tcx,tcy]];
			}
			
			if(points){
				
					var path = new Path({
						strokeColor: '#353535',
						strokeWidth:2,
						strokeCap:'round',
						strokeJoin : 'round'
					});
				
				path.addSegments(points);
				path.sendToBack();
				if(!f.connect)
					f.connect=[];
				f.connect.push(path);
				if(!t.connect)
					t.connect=[];
				t.connect.push(path);
				path.frm = f;
				path.to  = t;
			}
		}

		function reconnect(f,t,p){
			//console.log('connect');
			var skewness = 50/100;
			var fbs =f.bounds;
			var tbs=t.bounds;

			var fcx =fbs.x+(fbs.width/2) ,fcy =fbs.y+(fbs.height/2);
			var tcx =tbs.x+(tbs.width/2) ,tcy =tbs.y+(tbs.height/2);

			//console.log('fcx',fcx,'fcy',fcy);
			//console.log('tcx',tcx,'tcy',tcy);

			var lr = (fcx < tcx) ? 'right' :'left';
			var tb = (fcy < tcy ) ? 'bottom' :'top';

			lr = (fcx === tcx ) ? 'inline' : lr;
			tb = (fcy === tcy) ? 'inline' : tb;

			
			//console.log('lr',lr);
			//console.log('tb',tb);

			var points =null;
			if(lr=='inline' && tb=='inline'){
				;//do nothing
			}else if(lr=='inline' || tb=='inline'){
				points =[[fcx,fcy],[tcx,tcy]];
			}else if(lr =='right' && (tb =='top' || tb=='bottom')){
				var bx = Math.abs(fcx-tcx)*skewness;
				var nx = bx+fcx;
				points = [[fcx,fcy],[nx,tcy],[nx,tcy],[tcx,tcy]];
			}else if(lr =='left' && (tb =='top' || tb=='bottom')){
				var bx = Math.abs(fcx-tcx)*skewness;
				var nx = Math.abs(bx-fcx);
				points = [[fcx,fcy],[nx,tcy],[nx,tcy],[tcx,tcy]];
			}
			
			if(points){
				p.removeSegments()
				p.addSegments(points);
			}
		}




		var r = 20;
		var c1 = new Path.Circle(new Point(350, 350), r);
		c1.strokeColor = 'white';
		c1.fillColor =  {
		gradient: {
			stops: ['#498FC3', '#37618B']
		},
		origin: [350-20,350-20],
		destination: [350+20,350+20]
	}



		var c2 = new Path.Circle(new Point(100, 100), r);
		c2.strokeColor = 'white';
		c2.fillColor =  {
		gradient: {
			stops: ['#A9CA21', '#7D9815']
		},
		origin: [c2.position.x-20,c2.position.y-20],
		destination: [c2.position.x+20,c2.position.y+20]
	}


		var c3 = new Path.Circle(new Point(100, 600), r);
		c3.strokeColor = 'white';
		c3.fillColor =  {
		gradient: {
			stops: ['#FFFFFF', '#ADADAD']
		},
		origin: [c3.position.x-20,c3.position.y-20],
		destination: [c3.position.x+20,c3.position.y+20]
	}

		var c4 = new Path.Circle(new Point(600, 100), r);
		c4.strokeColor = 'black';

		var c5 = new Path.Circle(new Point(600, 600), r);
		c5.strokeColor = 'black';

		var c6 = new Path.Circle(new Point(100, 350), r);
		c6.strokeColor = 'black';

		var c7 = new Path.Circle(new Point(600, 350), r);
		c7.strokeColor = 'black';

		var c8 = new Path.Circle(new Point(350, 100), r);
		c8.strokeColor = 'black';

		var c9 = new Path.Circle(new Point(350, 600), r);
		c9.strokeColor = 'black';

		var nodes = [c1,c2,c3,c4,c5,c6,c7,c8,c9];

		function onMouseDrag(event) {
			for(var i=0;i<nodes.length;i++){
				if(nodes[i].contains(event.point)){
					var n = nodes[i];
					n.position = event.point;
					var cs = n.connect;
					for(var j=0;j<cs.length;j++){
						var c = cs[j]
						reconnect(c.frm,c.to,c)	
					}
					
				}
			}
		}
		connect(c1,c8);
		connect(c1,c9);
		connect(c1,c6);
		connect(c1,c7);
		connect(c1,c4);
		connect(c1,c5);
		connect(c1,c2);
		connect(c1,c3);
		tool.minDistance = 1;
		function onFrame(event){
			
		}

		
	</script>
</head>
<body style="width:100%;height:100%">
	<canvas id="canvas" width=700 height=700 ></canvas>
</body>
</html>
